<template>
	<view class="navbar-box" :style="{ 'background-color': props.bgColor?props.bgColor:dynamicStyles }"
		v-if="statusBarHeight && navBarHeight">
		<!-- 状态栏 -->
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 导航栏 -->
		<view :style="{ height: navBarHeight + 'px' }">
			<slot>
				<view class="navbar-default">
					<view class="default-left" v-if="props.type != 'none'">
						<view v-if="props.type == 'back'" @click="goBack()">
							<image class="icon-back"
								:src="bgColor=='#fff'||bgColor=='#ffffff'?'/static/common/back.png' :'/static/common/back1.png'">
							</image>
						</view>
						<view v-if="props.type == 'home'" @click="goHome()">
							<image class="icon-home"
								:src="bgColor=='#fff'||bgColor=='#ffffff'?'/static/common/home-black.png' :'/static/common/home-white.png'">
							</image>
						</view>
					</view>
					<view class="default-title" :style="{'color': props.color}">{{ props.title}}</view>
				</view>
			</slot>
		</view>
	</view>
	<!-- 占位 -->
	<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
</template>


<script setup>
	/**
	 * 	import HeaderNav from '@/components/HeaderNav/HeaderNav.vue'
	 * 	<HeaderNav title="" type="none" color="#fff" :bgColor=""  />
	 **/
	import {
		useStore
	} from 'vuex'
	import {
		ref,
		onMounted,
		computed,
		watchEffect,
		defineProps
	} from 'vue';
	const store = useStore()
	const app = getApp();
	const dynamicStyles = ref('#5F67EC')
	const imageUrl = computed(() => app.globalData.imageUrl)
	const inspectionTheme = computed(() => store.state.user.inspectionTheme)
	let statusBarHeight = ref(0);
	let navBarHeight = ref(0);
	
	const props = defineProps({
		type: {
			type: String,
			default: 'back', //左边按钮状态
		},
		title: {
			type: String,
			default: '天府行', //中间文字
		},
		bgColor: {
			type: String,
			default: '', //背景颜色
		},

		color: {
			type: String,
			default: '#fff', //字体颜色
		}
	});

	onMounted(() => {
		geStatusBarHeight();
		getNavBarHeight();
		dynamicStyles.value = getColorValue(inspectionTheme.value, '--primary-color')
		store.dispatch('user/setNavHeight',statusBarHeight.value + navBarHeight.value);
	});

	// 获取状态栏高度
	function geStatusBarHeight() {
		statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
	}
	// 获取导航栏高度
	function getNavBarHeight() {
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 胶囊信息
		// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调
		navBarHeight.value =
			menuButtonInfo.height +
			(menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 +
			2;

	}
	const getColorValue = (input, colorName, fallback = '#5F67EC') => {
		if (typeof input !== 'string' || !input.trim()) return fallback;
		const escaped = colorName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
		const regex = new RegExp(`${escaped}\\s*:\\s*([^;]+)`, 'i');
		const match = input.match(regex);
		return match ? match[1].trim() : fallback;
	}
	// 返回上一页
	function goBack() {
		const pages = getCurrentPages();
		if (pages.length == 1) {
			uni.reLaunch({
				url: '/pages/tabbar/index/index',
			});
			return;
		}
		uni.navigateBack();
	}
	// 去首页
	function goHome() {
		uni.reLaunch({
			url: '/pages/tabbar/index/index',
		});
	}
</script>

<style lang="scss" scoped>
	.navbar-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2000;

		.navbar-default {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.default-left {
				position: absolute;
				top: 50%;
				left: 24rpx;
				transform: translateY(-50%);

				.default-all {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 30rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 32rpx;

					.default-line {
						width: 2rpx;
						height: 40rpx;
						background: #afafaf;
						margin: 0 20rpx;
					}
				}

				.default-back,
				.default-home {
					width: 63rpx;
					height: 63rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.default-title {

				font-weight: bold;
				font-size: 16px;
			}
		}
	}

	.icon-back {
		width: 28rpx;
		height: 28rpx;
		display: inline-block;
		line-height: 1;
	}

	.icon-home {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		line-height: 1;
	}
</style>
